<template>
    <div class="user-info-box">
        <LayerFlex title="分类" @refreshChild="refreshChild" @saveChange="saveChange">
            <template v-slot:listBox>
                <div v-for="(item, index) in typeList" class="view-flex-box" :key="index" @click="toCheck(index)"
                    :class="currentIndex == index ? 'active' : ''">
                    {{ item.name }}
                </div>
            </template>
            <template v-slot:titleButton>
                <el-button type="primary" size="small" class="white-bg-btn" plain @click="Edit">编辑</el-button>
            </template>
            <template v-slot:title>
                {{ typeList.length > 0 ? typeList[currentIndex].name : '' }}
            </template>
            <template v-slot:content>
                <ChildrenOne v-if="Number(typeId) == 2" :currentItem="currentItem" :typeId="typeId"
                    :ref="`ChildRef${typeId}`" @getConfig="getConfig"></ChildrenOne>
                <ChildrenTwo v-if="Number(typeId) == 3" :currentItem="currentItem" :typeId="typeId"
                    :ref="`ChildRef${typeId}`" @getConfig="getConfig">
                </ChildrenTwo>
                <ChildrenThild v-if="Number(typeId) == 4" :currentItem="currentItem" :typeId="typeId"
                    :ref="`ChildRef${typeId}`" @getConfig="getConfig">
                </ChildrenThild>
                <ChildrenFour v-if="Number(typeId) == 5" :currentItem="currentItem" :typeId="typeId"
                    :ref="`ChildRef${typeId}`" @getConfig="getConfig">
                </ChildrenFour>
                <ChildrenFive v-if="Number(typeId) == 6" :currentItem="currentItem" :typeId="typeId"
                    :ref="`ChildRef${typeId}`" @getConfig="getConfig">
                </ChildrenFive>
                <ChildrenSix v-if="Number(typeId) == 7" :currentItem="currentItem" :typeId="typeId"
                    :ref="`ChildRef${typeId}`" @getConfig="getConfig">
                </ChildrenSix>
                <div class="fixed-btn-box" v-if="Number(typeId) != 5 && Number(typeId) != 6 && Number(typeId) != 7">
                    <el-button type="primary" class="white-bg-btn" plain @click="refreshChild">重 置</el-button>
                    <el-button type="primary" class="shadow-bg-btn" @click="saveChange">保存更改</el-button>
                </div>
            </template>
        </LayerFlex>
    </div>
    <!-- 模块分类编辑弹窗 -->
    <ClassifyModule :classifyModelShow="classifyModelShow" @CancelModule="CancelModule" @typeListConfig="typeListConfig"
        :leftMenu="typeList">
    </ClassifyModule>
</template>
<script setup lang="ts">
import $util from '../../util/util'
import { ref, onMounted, getCurrentInstance, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ChildrenOne from './ChildrenOne/Index.vue'
import ChildrenTwo from './ChildrenTwo/Index.vue'
import ChildrenThild from './ChildrenThild/Index.vue'
import ChildrenFour from './ChildrenFour/Index.vue'
import ChildrenFive from './ChildrenFive/Index.vue'
import ChildrenSix from './ChildrenSix/Index.vue'
import ClassifyModule from './ClassifyModule.vue'
import { getTypeList, getMaterList, getScreenSettingList, operateScreenSetting } from '../Api/index'
const currentIndex = ref<number>(0)
const leftMenu = ref<any>([]) // 类目列表
const typeId = ref<string>('')
const typeList = ref<any>([])
const typeListConfig = async () => {
    const res: any = await getTypeList({ is_system: 0 })
    if (res.code !== 1) return ElMessage.error(res.message)
    typeList.value = res.data
    if (!typeId.value) {
        typeId.value = res.data.length > 0 ? res.data[0].id : ''
    }
    currentItem.value = filterData(typeId.value)
}
// 当前选中的数据
const currentItem = ref<any>({})
// 获取所有的类目配置
const getConfig = async (val: boolean) => {
    const res: any = await getMaterList({ type_id: '' })
    if (res.code !== 1) return ElMessage.error(res.message)
    leftMenu.value = res.data.length > 0 ? res.data : []
    if (typeId.value) {
        currentItem.value = filterData(typeId.value)
    }
    setTimeout(() => {
        if (val) {
            // 修改成功之后提交大屏配置修改接口
            proxy.$refs[`ChildRef${typeId.value}`].setConfig()
        }
    }, 500);
}
const toCheck = (index: number) => {
    currentIndex.value = index
    typeId.value = typeList.value[index].id
    currentItem.value = filterData(typeId.value)
}
// 根据获取的type_id拿到相应的数据
const filterData = (val: number | string) => {
    let arr = {}
    leftMenu.value.forEach((item: any) => {
        if (Number(item.type_id) == Number(val)) {
            arr = item
        }
    })
    return arr
}
// 添加类目
const CancelModule = () => {
    classifyModelShow.value = false
}
// 编辑模块分类
const classifyModelShow = ref<boolean>(false)
const Edit = () => {
    classifyModelShow.value = true
}
const { proxy } = getCurrentInstance() as any
const refreshChild = () => {
    proxy.$refs[`ChildRef${typeId.value}`].refreshChild()
}
const saveChange = () => {
    proxy.$refs[`ChildRef${typeId.value}`].submitFrom()
}
onMounted(async () => {
    await getConfig(false)
    await typeListConfig()
})
</script>
<style lang="scss" scoped>
.user-info-box {
    height: 100%;

    .fixed-btn-box {
        position: absolute;
        bottom: 0;
        left: 0;
        background: #fff;
        box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.1);
        padding: 15px;
        width: 100%;
        text-align: center;
    }
}
</style>
